<template>
  <view>
    <u-sticky>
      <view class="screen">
        <view class="topBgc">
          <text class="Machine">我的商户</text>
          <view class="search">
            <input
              type="text"
              v-model="keyword"
              placeholder="请输入商户姓名或商户号"
            />
            <view class="btnSearch" @click="searchTab">搜 索</view>
          </view>
          <view class="showPart">
            <text>共{{ merchantTotal }}个商户</text>
          </view>
        </view>
      </view>
    </u-sticky>
    <view v-if="machinelist">
      <view class="home">
        <view v-if="machinelist.length > 0">
          <view
            class="home-item"
            v-for="(item, index) in machinelist"
            :key="index"
            @click="showDetailTab(item.mercId,item.mobile_mask)"
          >
            <view class="merchantName flex align-center justify-between">
              <text>{{ item.mercNm }}</text>
              <text>{{ item.mercId }}</text>
            </view>
            <view class="merNum">{{ item.number }}</view>

            <!-- <view class="activeTime surplus">
            <u-icon class="cuIcon-repair size"></u-icon>
            <text>产品编号：{{ item.product_name }}</text>
          </view> -->
			
			<view class="activeTime surplus">
			  <u-icon class="cuIcon-phone size"></u-icon>
			  <text>手机号：{{ item.mobile_mask?item.mobile_mask:'暂无' }}</text>
			</view>
            <view class="activeTime surplus">
              <u-icon class="cuIcon-time size"></u-icon>
              <text>入网时间：{{ item.joinDate }}</text>
            </view>
            <view class="activeTime surplus" v-if="item.active_time!=null && item.active!='0'">
              <u-icon class="cuIcon-repair size"></u-icon>
              <text
                >激活时间：{{ item.active_time }}</text
              >
            </view>
            <view class="activeTime">
              <u-icon class="cuIcon-refund size"></u-icon>
              <text wx:else
                >本月交易额：{{
                  item.trade_amount ? $tools.format(item.trade_amount) : "0.00"
                }}元</text
              >
            </view>

            <!-- <view class="macType">
            {{ item.mercNm }}
          </view> -->
            <u-button
              type="error"
              :ripple="true"
              size="mini"
              class="detailInfo"
              @click="showDetailTab(item.mercId,item.mobile_mask)"
            >
              查看详情</u-button
            >
          </view>
        </view>
      </view>
    </view>

    <view class="noMachine flex align-center" v-if="machinelist.length == 0 && isLoad">
      <image src="../../static/images/noData/zwsy.png" mode="widthFix"></image>
      <text>暂无商户</text>
    </view>
    <u-toast ref="uToast" />
    <u-loadmore
      :status="status"
      @loadmore="loadmore"
      style="padding: 0rpx 0 50rpx"
      v-if="machinelist.length > 0"
    />
    <toast></toast>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: "",
      merchantTotal: 0,
      machinelist: [],
      page: 1,
      pageNumber: 10,
      noMore: false,
      status: "loadmore",
      scrollTop: 0,
      isLoad: false,
    };
  },
  onLoad() {
    this.getCustomerList();
  },
  methods: {
    //获取商户列表
    getCustomerList() {
      this.$u.api
        .myMerchantList({
          active_status: 2,
          page: this.page,
          limit: this.pageNumber,
          keyword: this.keyword,
        })
        .then((res) => {
          if (res.status == 200) {
            var datas = res.result.list;
            if (this.page == 1) {
              this.merchantTotal = res.result.total;
            }
            if (this.page == 1 && datas.length == 0) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page == 1 && datas.length < this.pageNumber) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page > 1 && datas.length < this.pageNumber) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page > 1 && datas.length == this.pageNumber) {
              this.status = "loading";
            }
            this.machinelist = this.machinelist.concat(datas);
          }
          this.isLoad = true;
          uni.stopPullDownRefresh();
        })
		.catch((res) => {
			if (res.errMsg == "request:fail timeout") {
				this.$u.toast("请求超时，请重试!");
			} else if (res.errMsg == "request:fail") {
				this.$u.toast("请求失败，请重试");
			} else {
				 this.$u.toast("请求失败，请重试");
			}
			this.$loading(false);
			setTimeout(() => {
				this.$u.route({
					type: "navigateBack",
					delta: 1,
				});
			}, 2000);
		});
    },

    // 搜索
    searchTab() {
      this.page = 1;
      this.keyword = this.$u.trim(this.keyword, "all");
      this.machinelist = [];
      this.status = "nomore";
      this.getCustomerList();
    },

    // 点击下载更多
    loadmore() {
      if (this.noMore) {
        this.status = "nomore";
      } else {
        this.page = ++this.page;
        this.status = "loadmore";
        this.getCustomerList();
      }
    },
    onPullDownRefresh() {
      this.machinelist = [];
      this.page = 1;
      this.status = "loadmore";
      this.noMore = false;
      this.isLoad = false;
      this.keyword = "";
      this.getCustomerList();
    },
    // 下拉触底
    onReachBottom() {
      if (this.noMore) {
        this.status = "nomore";
      } else {
        this.status = "loading";
        this.page = ++this.page;
        this.getCustomerList();
      }
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },

    showDetailTab(mercId,phone) {
      this.$u.route({
        url: "/pages/myMerchant/merchantDetail",
        params: {
			mercId:mercId,
			phone:phone
			},
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.screen {
  height: 90rpx;
  width: 100%;
  line-height: 80rpx;
  background-color: #f1f1f1;
}

.topBgc {
  position: relative;
  padding: 0 20rpx;
  position: relative;
  font-family: din;
  width: 100%;
  height: 170rpx;
  display: flex;
  justify-content: space-between;

  background-image: linear-gradient(to top, #fc6306 0%, #fb4535 100%);
  box-shadow: 0 1rpx 3rpx #dddddd;
  .showPart {
    position: absolute;
    bottom: 20rpx;
    right: 30rpx;
    color: #fff;
    letter-spacing: 1rpx;
  }
}

.topBgc > .Machine {
  font-size: 34rpx;
  color: #fff;
  padding-left: 20rpx;
  letter-spacing: 2rpx;
}

.search {
  position: relative;
  border-radius: 25rpx;
  padding: 0 30rpx;
  height: 60rpx;
  margin: 10rpx 10rpx 0 20rpx;
  background-color: #fff;
  flex: 1;

  input {
    height: 60rpx;
    line-height: 60rpx;
    font-size: 28rpx;
  }
}

.btnSearch {
  position: absolute;
  right: 10rpx;
  top: 10rpx;
  width: 100rpx;
  text-align: center;
  color: #777;
  line-height: 20px;
  height: 40rpx;
  z-index: 99;
  border-left: solid 1rpx #bbb;
}

.home {
  padding: 54rpx 30rpx 20rpx;
  font-family: din;
}

.home-item {
  position: relative;
  padding: 20rpx 30rpx 10rpx;
  background-color: #fff;
  box-shadow: 5rpx 5rpx 12rpx #ccc;
  border-radius: 10rpx;
  overflow: hidden;
  margin-bottom: 30rpx;
}

.merchantName text:first-child {
  padding: 6rpx 10rpx;
  border-radius: 8rpx;
  background-image: linear-gradient(to top, #fc6306 0%, #fb4535 100%);
  color: #fff;
}

.merchantName text:last-child {
  padding-left: 24rpx;
  letter-spacing: 1rpx;
  font-size: 34rpx;
}

.merNum {
  text-align: center;
  font-size: 36rpx;
  font-weight: 700;
  padding: 30rpx 0 10rpx;
  letter-spacing: 2rpx;
}

.activeTime {
  border-top: 1rpx solid rgb(230, 230, 230);
  display: flex;
  align-items: center;
  line-height: 70rpx;
  height: 60rpx;
  padding: 20rpx 0;
}

.size {
  color: #fc6306;
  padding-right: 10rpx;
  font-weight: 500;
  font-size: 30rpx;
}

.macType {
  position: absolute;
  right: -50px;
  top: 13px;
  font-size: 28rpx;
  transform: rotate(45deg);
  color: #fff;
  background-color: #fc6306;
  text-align: center;
  width: 150px;
  line-height: 26px;
}

.detailInfo {
  position: absolute;
  right: 30rpx;
  bottom: 8rpx;
}
</style>
